<script>
import MyCom1 from '@/components/08_动态组件_component1.vue'
import MyCom2 from '@/components/08_动态组件_component2.vue'
import MyCom3 from '@/components/08_动态组件_component3.vue'


  export default {
    data(){
      return{
        nowCom:'my-com1'
      }
    },
    methods:{

    },
    components:{
      'my-com1':MyCom1,
      'my-com2':MyCom2,
      'my-com3':MyCom3,
    },
  }

</script>

<template>
  <div>08_动态组件.vue
    <button @click="nowCom = 'my-com1'">动态组件1</button>
    <button @click="nowCom = 'my-com2'">动态组件2</button>
    <button @click="nowCom = 'my-com3'">动态组件3</button>

    <!--1：切换组件时值被缓存，输入的值不会丢-->
    <transition name="slide" mode="out-in">
      <keep-alive>
        <component :is="nowCom"></component>
      </keep-alive>
    </transition>
  </div>
</template>

<style scoped>
.slide-enter-from{
  opacity: 0;
  transform: translateX(200px);
}

.slide-enter-to{
  opacity: 1;
  transform: translateX(0);
}

.slide-enter-active{
  transition: 1s;
}

.slide-leave-from{
  opacity: 1;
  transform: translateX(0);

}

.slide-leave-to{
  opacity: 0;
  transform: translateX(200px);

}

.slide-leave-active{
  transition: 1s;
}
</style>